<template>
  <div class="banner">
    <div class="contain-header">
      <span>banner设置<i class="arrow"></i></span>
    </div>

    <div class="contain-body clearfix">
      <div class="top-div">
        <div class="el-button el-button--theme" style="margin: 0 10px 20px 0; float: right;" @click="addBanner">新增Banner</div>
      </div>
      <div class="list-cont normal-shadow">
        <el-table :data="bannerData" border style="width: 100%" v-loading="listLoading">
          <el-table-column prop="type" label="展示位置" width="180"></el-table-column>
          <el-table-column label="图片" width="380">
            <template scope="scope">
              <img :src="recomUrl + scope.row.pic" alt="" style="width: 100%">
            </template>
          </el-table-column>
          <el-table-column prop="url" label="URL"></el-table-column>
          <el-table-column prop="addtime" label="最后修改时间"></el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button class="bj-btn" size="small" @click="editBanner(scope.$index, scope.row)"><i class='glyphicon glyphicon-edit'></i></el-button>
              <el-button class="bj-btn" size="small" @click="deleteRead(scope.row.id)"><i class="glyphicon glyphicon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--新增界面-->
      <el-dialog title="新增Banner" v-model="addFormVisible" style="width: 1000px;margin: 0 auto;" :close-on-click-modal="false">
        <el-form :model="addForm" label-width="80px" ref="addForm" style="text-align: center;">
          <el-upload
            class="upload-demo"
            style="margin: 0 auto;"
            v-model="addForm.pic"
            :action="imgUrl + 'upload'"
            drag
            :data = 'banner'
            :on-change='fileChange'
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-form-item label="URL">
            <el-input v-model="addForm.url" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
        </div>
      </el-dialog>

      <!--编辑界面-->
      <el-dialog title="编辑banner" v-model="editFormVisible" style="width: 1000px;margin: 0 auto;" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" ref="editForm" style="text-align: center;">
          <el-upload
            class="upload-demo"
            style="margin: 0 auto;"
            :action="imgUrl + 'upload'"
            drag
            :data = 'banner'
            :on-change='fileChange'
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-form-item label="URL" prop="url" style="width: 88%;">
            <el-input v-model="editForm.url"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
      </el-dialog>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange" :page-size="page" layout="prev, pager, next, jumper" :total="totalPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'recommend',
    data () {
      return {
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        editLoading: false,
        editFormVisible: false,
        banner: {
          from: 'banner'
        },
        editForm: {type: '', pic: '', url: ''},
        addLoading: false,
        addFormVisible: false,
        addForm: {type: '', pic: '', url: ''},
        listLoading: false,
        totalPage: 1,
        page: 1,
        bannerData: [],
        params: {
          page: 1
        }
      }
    },
    methods: {
      // 获取banner列表
      getBanner () {
        this.listLoading = true
        this.$http('get', 'banner', this.params)
          .then((data) => {
            this.listLoading = false
            this.bannerData = data.result.dataList
            var total = data.result.total % 10 === 0 ? parseInt(data.result.total / 10) : parseInt(data.result.total / 10) + 1
            this.totalPage = total
          })
      },
      handleCurrentChange (val) {
        this.params.page = val
        this.getBanner()
      },
      // 显示编辑界面
      editBanner: function (index, row) {
        this.editFormVisible = true
        this.editForm = Object.assign({}, row)
      },
      fileChange (file) {
        if (file.response) {
          this.editForm.pic = file.response.result
          this.addForm.pic = file.response.result
        }
      },
      // 编辑
      editSubmit: function () {
        this.editLoading = true
        this.$http('put', 'banner', this.editForm)
          .then((data) => {
            this.editLoading = false
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.$refs['editForm'].resetFields()
            this.editFormVisible = false
            this.getBanner()
          })
      },
      // 显示新增界面
      addBanner: function () {
        this.addFormVisible = true
        this.addForm = {type: '', pic: '', url: ''}
      },
      // 新增
      addSubmit: function () {
        this.addLoading = true
        this.$http('post', 'banner', this.addForm)
          .then((data) => {
            this.addLoading = false
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.$refs['addForm'].resetFields()
            this.addFormVisible = false
            this.getBanner()
          })
      },
      // 删除
      deleteRead: function (id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          this.$http('delete', 'banner', {id: id})
            .then((data) => {
              this.listLoading = false
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getBanner()
            })
        }).catch(() => {
        })
      }
    },
    mounted () {
      this.getBanner()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-form-item {
    margin-top: 20px;
    width: 90%;
    margin-bottom: 22px;
  }
  .upload-demo{
    text-align: center;
  }
  .top-div{
    overflow: hidden;
  }
  i{
    color: #58b5ff;
    font-size: 18px;
  }
  .bj-btn{
    border:0;
    width:19px;
    height:19px;
    padding: 0;
  }
</style>
